// packageF/others/customerCenter/component/history-echart/history-echart.js
const echarts = require("../../../../../ec-canvas/echarts"); //路径一定要正确否则会调用错误
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    history: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    eChartData: [],
    defaultData: [{
        date: "",
        total: 0,
        people_total: 0
      },
      {
        date: "",
        total: 0,
        people_total: 0
      },
      {
        date: "",
        total: 0,
        people_total: 0
      },
    ],
    ecIncome: {
      lazyLoad: false, // 延迟加载
    },
    income_dynamic: {
      total_amount: 50
    }
  },
  lifetimes: {
    attached() {
      setTimeout(() => {
        this.getData();
      }, 1000);
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    getData() {
      let urlStr = app.getNetAddresss("finance.income-page.income-charts");
      app._getNetWork({
        url: urlStr,
        data: {
          charts_type: 0,
        },
        success: (resdata) => {
          let res = resdata.data;
          if (res.result == 1) {
            this.setData({
              income_dynamic: res.data,
            });
            this.setECharts();

          } else {
            wx.showToast({
              title: res.msg,
              icon: "none",
              duration: 1500,
            });
          }
        },
        fail: (res) => {
          console.log(res);
        },
      });
    },
    setECharts() {
      let echartsComponnet = this.selectComponent("#echats-income");
      let option = {
        title: {
          text: "历史数据",
          top: "6%",
          left: "5%",
          textStyle: {
            color: "#0a0a14",
            fontWeight: "bold"
          },
        },
        legend: {
          type: "plain",
          orient: 'horizontal',
          top: "6%",
          right: "5%",
        },
        grid: {
          top: "25%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "rgb(208,208,208)",
              width: 2
            }
          },
          axisLabel: {
            color: "rgb(108,108,108)"
          }
        },
        yAxis: [{
          type: "value",
          minInterval: 1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
        }],
        series: [{
            name: "次数",
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            barWidth: 25,
            color: '#34c758',
          },
          {
            name: "人数",
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            barWidth: 25,
            color: '#ff9502',
          }
        ]
      }
      // 指定数据集
      let curDate = new Date();
      let preDate = new Date(curDate.getTime() - 24 * 60 * 60 * 1000); //前一天
      let nextDate = new Date(curDate.getTime() + 24 * 60 * 60 * 1000); //后一天
      this.data.defaultData[0].date = this.dateFormat("mm-dd", preDate);
      this.data.defaultData[1].date = this.dateFormat("mm-dd", curDate);
      this.data.defaultData[2].date = this.dateFormat("mm-dd", nextDate);
      if(this.data.history && this.data.history.length > 0){
        this.data.eChartData = this.data.history;
      }else{
        this.data.eChartData = this.data.defaultData;
      }
      
      option.dataset = {};
      option.dataset.dimensions = ["date", "total", "people_total"];
      option.dataset.source = this.data.eChartData;
      echartsComponnet.init((canvas, width, height) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
        });
        Chart.setOption(option);
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return Chart;
      });
    },
    initOptions() {
      let option = {
        title: {
          text: "历史数据",
          top: "6%",
          left: "5%",
          textStyle: {
            color: "#0a0a14",
            fontWeight: "bold"
          },
        },
        legend: {
          type: "plain",
          orient: 'horizontal',
          top: "6%",
          right: "5%",
        },
        grid: {
          top: "25%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "rgb(208,208,208)",
              width: 2
            }
          },
          axisLabel: {
            color: "rgb(108,108,108)"
          }
        },
        yAxis: [{
          type: "value",
          minInterval: 1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
        }],
        dataset: {},
        series: [{
            name: "次数",
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            barWidth: 25,
            color: '#34c758',
          },
          {
            name: "人数",
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            barWidth: 25,
            color: '#ff9502',
          }
        ]
      };
      return option;
    },
    //将时间对象转换成自定义正常时间格式
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
        }
      }
      return fmt;
    },
  },
})